<template>
  <div class="dashboard-container">
    <h3 style="margin: 0 0 20px 0;">常用功能</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in quick" :key="item.id">
        <img :src="item.icon">
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0;">echarts系列</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in echartsList" :key="item.id">
        <img :src="item.icon">
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0;">css特效</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in cssList" :key="item.id">
        <img :src="item.icon">
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0;">博客系列</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in blogList" :key="item.id">
        <img :src="item.icon">
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0;">外部工具区</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in toolList" :key="item.id">
        <img :src="item.icon">
        <a :href="item.link" target="_blank">{{ item.label }}</a>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0;">图标UI组件库</h3>
    <div class="container statistics_sum shadow">
      <div class="content" v-for="item in uiLists" :key="item.id">
        <img :src="item.icon">
        <a :href="item.link" target="_blank">{{ item.label }}</a>
      </div>
    </div>
    <h3>数据概况</h3>
    <div class="data-container shadow">
      <el-row>
        <el-col :span="4" class="data-item">
          <span class="colorc" style="font-size: 20px">11023人</span>
          <span style="font-size: 16px; margin-top: 5px">收藏模板</span>
        </el-col>
        <el-col :span="4" class="data-item">
          <span class="colorb" style="font-size: 20px">6280次</span>
          <span style="font-size: 16px; margin-top: 5px">下载模板</span>
        </el-col>
        <el-col :span="4" class="data-item">
          <span class="colora" style="font-size: 20px">10721人</span>
          <span style="font-size: 16px; margin-top: 5px">分享模板</span>
        </el-col>
      </el-row>
    </div>
    <h3>图表分析</h3>
    <div class="chart">
      <div class="chart-bing shadow">
        <div class="bing"></div>
      </div>
      <div class="chart-tiao shadow">
        <div class="tiao"></div>
      </div>
      <div class="chart-xian shadow">
        <div class="xian"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';
import tool from '@/utils/toolList';
import uiList from '@/utils/uiList'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'staffPhoto'
    ])
  },
  data(){
    return {
      quick: [
        { id: 0, link: '/tool/quillEditor', label: '富文本编辑器', icon: require('@/assets/home/富文本.png') },
        { id: 1, link: '/tool/excel', label: 'excel上传下载', icon: require('@/assets/home/excel.png') },
        { id: 2, link: '/tool/map', label: '百度地图', icon: require('@/assets/home/百度地图.png') },
        { id: 3, link: '/tool/grey', label: '网站变灰', icon: require('@/assets/home/07网站项目.png') },
        { id: 4, link: '/tool/drawer', label: '系统管理', icon: require('@/assets/home/m_outsource.png') },
        { id: 5, link: '/tool/dragDialog', label: '拖拽Dialog', icon: require('@/assets/home/拖拽.png') },
        { id: 6, link: '/tool/GDmap', label: '高德地图', icon: require('@/assets/home/高德地图.png') },
        { id: 7, link: '/user/index', label: '个人中心', icon: require('@/assets/home/个人中心.png') },
        { id: 8, link: '/tool/i18n', label: '国际化', icon: require('@/assets/home/国际网络.png') },
        { id: 9, link: '/tool/slider', label: 'slider滑块', icon: require('@/assets/home/滑动条.png') },
        { id: 10, link: '/tool/zip', label: 'zip下载', icon: require('@/assets/home/zip.png') },
        { id: 11, link: '/tool/pdf', label: 'pdf下载', icon: require('@/assets/home/pdf.png') },
        { id: 12, link: '/tool/iconSelect', label: 'icon下拉', icon: require('@/assets/home/下拉功能按钮.png') },
        { id: 13, link: '/tool/menuTree', label: '菜单树下拉', icon: require('@/assets/home/MBE风格常用图标-文件夹.png') },
        { id: 14, link: '/tool/rgba', label: 'rgba滑块', icon: require('@/assets/home/颜色调整.png') },
        { id: 15, link: '/message/msgindex', label: '消息提示', icon: require('@/assets/home/消息.png') },
        { id: 16, link: '/tag/tagIndex', label: '标签', icon: require('@/assets/home/标签.png') },
        { id: 17, link: '/transfer/transferIndex', label: '穿梭框', icon: require('@/assets/home/穿梭框.png') }
      ],
      echartsList: [
        { id: 0, link: '/dataAnalysis/production', label: '折线图', icon: require('@/assets/home/折线图.png') },
        { id: 1, link: '/dataAnalysis/health', label: '柱状图', icon: require('@/assets/home/柱状图.png') },
        { id: 2, link: '/dataAnalysis/pie', label: '饼图', icon: require('@/assets/home/饼图-南丁格尔.png') },
        { id: 3, link: '/dataAnalysis/scatter', label: '散点图', icon: require('@/assets/home/散点图.png') },
        { id: 4, link: '/dataAnalysis/candlestick', label: 'k线图', icon: require('@/assets/home/K线图.png') },
        { id: 5, link: '/dataAnalysis/radar', label: '雷达图', icon: require('@/assets/home/雷达图.png') }
      ],
      cssList: [
        { id: 0, link: '/cssThree/slidebartitle', label: '幻灯条标题', icon: require('@/assets/home/标题栏.png') },
        { id: 1, link: '/cssThree/scrollText', label: '滚动文字', icon: require('@/assets/home/自动滚屏.png') },
        { id: 2, link: '/cssThree/buttonHoverStroke', label: '按钮悬停描边', icon: require('@/assets/home/发声按钮.png') },
        { id: 3, link: '/cssThree/buttonHoverMultistroke', label: '按钮悬停多重描边', icon: require('@/assets/home/悬浮按钮.png') },
        { id: 4, link: '/cssThree/buttonHoverFlashes', label: '按钮悬停闪烁', icon: require('@/assets/home/闪烁.png') },
        { id: 5, link: '/cssThree/dotAnimation', label: '圆点动画', icon: require('@/assets/home/圆点.png') },
        { id: 6, link: '/cssThree/snowAnimation', label: '飘雪动画', icon: require('@/assets/home/雪花.png') },
        { id: 7, link: '/cssThree/maskEffect', label: '遮罩效果', icon: require('@/assets/home/阴影.png') },
        { id: 8, link: '/cssThree/todoList', label: '计划表效果', icon: require('@/assets/home/采购计划.png') },
        { id: 9, link: '/cssThree/particles', label: '粒子特效', icon: require('@/assets/home/粒子.png') },
        { id: 10, link: '/cssThree/verbatimEffect', label: '逐字特效', icon: require('@/assets/home/文字.png') }
      ],
      blogList: [
        { id: 0, link: 'blog/blogList', label: '博客文章列表', icon: require('@/assets/home/文章.png') }
      ],
      toolList: [],
      uiLists: []
    }
  },
  mounted(){
    this.getChartsBingList()
    this.getChartsTiaoList()
    this.getChartsXianList()
    this.toolList = tool
    this.uiLists = uiList
  },
  methods:{
    // 饼图
    getChartsBingList(){
      var chartDom = document.querySelector('.bing');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '模板数据分析',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 11023, name: '收藏模板' },
              { value: 6280, name: '下载模板' },
              { value: 10721, name: '分享模板' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 条形图/柱状图
    getChartsTiaoList(){
      var chartDom = document.querySelector('.tiao');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['下载模板', '收藏模板', '分享模板']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数据',
            type: 'bar',
            data: [6280, 11023, 10721],
            barWidth: 30,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      option && myChart.setOption(option);

    },
    // 折线图
    getChartsXianList(){
      var chartDom = document.querySelector('.xian');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['下载模板', '收藏模板', '分享模板']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数据',
            type: 'line',
            data: [6280, 11023, 10721],
            itemStyle: {
              normal: {
                color: '#fa6e86', //折线点的颜色
                borderColor: '#ffffff', //拐点边框颜色
                borderWidth: 2, //拐点边框大小
              },
            },
            lineStyle: {
              color: '#19d4ae', //折线的颜色
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }

  }
}
</script>

<style lang="scss" scoped>
.data-container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-row {
    width: 100%;
    .el-col {
      margin: 10px 0
    }
  }
  .data-item {
    display: flex;
    flex-direction: column;
    span:nth-child(1){
      font-size: 16px;
      padding: 10px 0;
    }
    span:nth-child(2){
      font-size: 13px;
    }
  }
}

.statistics_sum{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: auto;
  .statistics_sum_item{
    display: flex;
    flex-direction: column;
    span:nth-child(1){
      font-size: 16px;
      padding: 10px 0;
    }
    span:nth-child(2){
      font-size: 13px;
    }
  }
}
.shadow{
  box-shadow: 0 2px 12px 0 rgba(0,0,0, .1);
}
.chart{
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .chart-bing {
    width: 320px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .bing {
      width: 300px;
      height: 300px;
    }
  }
  .chart-xian {
    width: 450px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .xian {
      width: 430px;
      height: 300px;
    }
  }
  .chart-tiao {
    width: 450px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .tiao {
      width: 430px;
      height: 300px;
    }
  }
}

h3 {
  font-weight: 500;
  color: #999999
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: auto;

  .content {
    flex-shrink: 0;
    width: 20%;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    padding-left: 20px;
    margin: 10px 0;
    &:hover {
      color: #1aa97b;
      transition: all .3s;
    }

    img {
      width: 35px;
      height: 35px;
      vertical-align: middle;
    }
    a {
      margin-left: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
      height: 40px;
    }
  }
}

.colora {
  color: #19d4ae
}

.colorb {
  color: #5ab1ef
}

.colorc {
  color: #fa6e86
}
</style>
